import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:xws/helpers/my_selector.dart';
import 'package:xws/models/banner_obj.dart';
import 'package:xws/res/icons.dart';
import 'package:xws/state/app_state.dart';
import 'package:xws/state/user_state.dart';
import 'package:xws/ui/home/search_goods/search_goods.dart';
import 'package:xws/ui/login/login_page.dart';
import 'package:xws/ui/notify/notify_page.dart';
import 'package:xws/utils/app_util.dart';
import 'package:xws/utils/dio_utils/request/content_req.dart';
import 'package:xws/utils/theme_util.dart';
import 'package:xws/utils/tools_util.dart';
import 'package:xws/widgets/app_btn.dart';
import 'package:xws/widgets/app_img.dart';
import 'package:xws/widgets/swiper/app_swiper.dart';

/// 首页搜索框与轮播图
class HomeBanner extends StatelessWidget {
  const HomeBanner({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Color color = black(context).withOpacity(0.5);

    return SliverAppBar(
      titleSpacing: 0,
      elevation: 0,
      pinned: true,
      title: Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.location_on_rounded,
                    color: color,
                    size: 22,
                  ),
                  const SizedBox(height: 2),
                  Ms<UserState, String>(
                    selector: (UserState u) => u.reg,
                    builder: (String r) {
                      return Text(
                        r,
                        style: TextStyle(
                          color: color,
                          fontSize: 10,
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
          AppBtn(
            onTap: () => push(context, const SearchGoods()),
            height: 40,
            width: sw - 120,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  IR.search,
                  size: 14,
                  color: color,
                ),
                const SizedBox(width: 10),
                Text(
                  '搜索附近好物',
                  style: TextStyle(
                    fontSize: 14,
                    color: color,
                  ),
                ),
              ],
            ),
            radius: 20,
            color: canvas(context),
          ),
          Expanded(
            child: Center(
              child: IconButton(
                onPressed: () {
                  if (checkUserLogin) {
                    push(context, const NotifyPage());
                  }
                },
                padding: EdgeInsets.zero,
                icon: Ms<AppState, int>.child(
                  selector: (AppState a) => a.unRead,
                  child: const Icon(IR.notify),
                  builder: (int c, Widget child) {
                    return Badge(
                      elevation: 0,
                      child: child,
                      showBadge: c > 0,
                      badgeContent: Container(
                        child: Text(
                          c > 99 ? '..' : c.toString(),
                          style: TextStyle(
                            color: white(context),
                            fontSize: 8,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        alignment: Alignment.center,
                        constraints: const BoxConstraints(
                          minWidth: 14,
                          minHeight: 14,
                        ),
                        decoration: BoxDecoration(
                          color: red(context),
                          shape: BoxShape.circle,
                        ),
                      ),
                      padding: const EdgeInsets.all(1),
                      position: const BadgePosition(top: -6, end: -4),
                      animationType: BadgeAnimationType.scale,
                      animationDuration: const Duration(milliseconds: 300),
                      badgeColor: white(context),
                    );
                  },
                ),
                color: color,
              ),
            ),
          ),
        ],
      ),
      backgroundColor: white(context),
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          padding: EdgeInsets.only(
            top: statusBarHeight + kToolbarHeight + 10,
            bottom: 6,
          ),
          child: _buildBanner(context),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[white(context), canvas(context)],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildBanner(BuildContext context) {
    if (!isLogin) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: AppBtn.center(
          text: '立即登录',
          onTap: () => push(context, const LoginPage(withBack: true)),
          color: black(context).withOpacity(0.05),
          radius: 10,
          textStyle: TextStyle(
            color: theme2(context),
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
      );
    }
    return AppSwiper<BannerObj>(
      viewportFraction: 0.9,
      onTap: (BannerObj b) => openH5(b.redirectUrl),
      itemBuilder: (BannerObj b, _) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: AppImg.fitCover(url: b.imgUrl, radius: 10),
      ),
      onReady: () async => await getHomeBanner(),
    );
  }
}
